<style lang="less">
  .house-market-alerts {
    background: #fff;
    padding-top: 1.5em;
    h3.title {
      margin: 0;
      padding: 10px 0 10px 0;
      font-size: 48px;
      color: #0061ae;
      text-align: center;
      position: relative;
    }
    .more {
      width: 1190px;
      margin: 0 auto;
      font-size: 14px;
      text-align: right;
    }

    @descWidth: -158px;
    p.desc {
      margin: 10px auto;
      text-align: center;
      line-height: 100%;
      span {
        position: relative;
        display: inline-block;
        &:after, &:before {
          content: '';
          border-top: solid 1px #666;
          width: -(@descWidth + 20px);
          top: 0.5em;
          position: absolute;
        }
        &:after {
          left: @descWidth;
        }
        &:before {
          right: @descWidth;
        }

      }
    }

    .new-carousel {
      width: 1190px;
      margin: 2em auto 0 auto;
      padding-bottom: 2em;
    }
    .item-wrapper {
      display: flex;
      padding-bottom: 3em;
      .item {
        width: 50%;
        display: flex;
        .desc {
          margin: 0 1em;
          min-width: 0;
          h2 {
            margin-bottom: .3em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      img {
        width: 220px;
        height: 110px;
      }
    }

  }
</style>

<template>
  <div class="house-market-alerts">
    <h3 class="title">楼市快讯</h3>
    <p class="desc"><span>天天快讯，带你了解更多房产新闻</span></p>
    <div class="more">
      <router-link to="news"><span @click="scrollTop">更多资讯</span></router-link>
    </div>

    <Carousel :autoplay-speed="7000" dots="none" autoplay v-model="value2" class="new-carousel">
      <Carousel-item class="item-wrapper" :key="index" v-for="(subArray, index) in list">
        <div class="item" v-for="item in subArray">
          <router-link class="link" :to="{name:'newsDetail', params: {id: item.id}}">
            <img :src="item.coverPic" alt="">
          </router-link>
          <div class="desc">
            <h2>
              <router-link class="link" :to="{name:'newsDetail', params: {id: item.id}}">{{item.title}}</router-link>
            </h2>
            <p>{{item.content | substring(0, 110)}} ...</p>
          </div>
        </div>
      </Carousel-item>
    </Carousel>
  </div>
</template>

<script>
  import api from '@/service/api'

  export default {
    data () {
      return {
        value2: 0,
        list: []
      }
    },
    methods: {
      search () {
        api.homePageNewsTop30().then((res) => {
          this.list = _.chunk(res.data.top30, 2)
        })
      },
      scrollTop () {
        document.body.scrollTop = 0
      }
    },
    mounted () {
      this.search()
    }
  }
</script>
